import { createRouter, createWebHashHistory } from 'vue-router'
// 消息提示
import { ElMessage } from 'element-plus'
import { useUserInfoStore } from '@/stores/user'
// 写死路由叫静态路由
// 服务器返回路由信息--动态路由
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      name: 'layout',
      component: () => import('../views/LayoutView.vue'),
      // 路由重定向
      redirect: '/home',

      // 二级路由
      children: [
        {
          path: '/home',
          name: 'home',
          component: () => import('../views/HomeView.vue'),
          meta: {
            // 如果没有roles属性表示所有人都能访问
          },
        },

        {
          path: '/noPer',
          name: 'noPer',
          component: () => import('../views/noPer.vue'),
        },
        {
          path: '/:pathMatch(.*)*',
          name: 'NotFound',
          component: () => import('../views/NotFound.vue'),
        },
      ],
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/LoginView.vue'),
    },
  ],
})

// 定义白名单数组，记录哪些页面不需要登录
const whiteList = ['/login']
router.beforeEach(async to => {
  if (whiteList.includes(to.path) == false) {
    //要访问的地址不在 -白名单中，说明要访问的页面需要登录
    //判断用户登录状态
    const token = localStorage.getItem('xxMallAdminToken')
    if (token == null) {
      // 没有的登录
      ElMessage({
        message: '未登录',
        type: 'error',
      })
      router.push('/login')
    } else {
      // 用户已经登录
      // 获取用户的信息

      // 调用useUserInfoStore 函数，得到store
      const userInfoStore = useUserInfoStore()

      if (userInfoStore.role == 0) {
        //
        console.log('还没有获取用户信息-- 获取用户信息')
        await userInfoStore.getUserInfo()
        // 获取玩用户数据---permission list  ---- 注册了路由
        // router.addRoute()
        // router.addRoute('admin', { path: 'settings', component: AdminSettings })
        // router.addRoute('layout', { path: 'settings', component: AdminSettings })
        //1=  permission list --component 字符串  转为  一个懒加载函数
        dynamicRoutesHandler(userInfoStore.permissionList)
        console.log(userInfoStore.permissionList)

        userInfoStore.permissionList.forEach(v => {
          router.addRoute('layout', v)
        })

        //
      } else {
        console.log('已经获取用户信息')
      }

      console.log('用户角色', userInfoStore.role)
      // 判断用要访问的页面 ，当前角色是否有权限
      console.log('用户要访问的页面', to.path)
    }
  }
})

// vite 动态添加组件的方式
// 先获取import.meta.glob 获取这个views文件夹下面的 所有 vue文件
const modules = import.meta.glob('@/views/**/*.vue')
console.log(modules)

// 处理服务返回动态路路由信息，转为 vue-router 能用的路由信息
function dynamicRoutesHandler(permissionList) {
  permissionList.forEach(v => {
    console.log(v)
    //  v.component HomeView  -转为懒加载函数
    // v.component = () => import(`@/views/${v.component}.vue`)
    // v.component = () => import(`@/views/${v.component}.vue`)
    const name = `/src/views/${v.component}.vue`
    console.log(modules[name])

    v.component = modules[name]
    // 递归调用自己，如果childrend存在
    if (v.children) {
      dynamicRoutesHandler(v.children)
    }
  })
}

export default router
